import { Stage } from 'babylon-lib/base/stage';
import { UINode, CreateUINode } from 'babylon-lib/gui/base/ui-node';
import { CreateUIButton } from 'babylon-lib/gui/control/ui-button';
import { CreateUIText, UIText } from 'babylon-lib/gui/control/ui-text';
import { CreateUIRectangle } from 'babylon-lib/gui/control/ui-rectangle';
import { Vector3 } from '@babylonjs/core/Maths/math.vector';
import { ANCHOR } from 'babylon-lib/gui/control/abstract-base';
import { CrossImage } from 'babylon-lib/texture/icon-image/cross-image';
import { RenderOrder } from 'babylon-lib/misc/render-order';
import * as Data from '../data/data';
import { Control } from '@babylonjs/gui/2D/controls/control';
import { AnimationFrame, Utils } from 'babylon-lib/index';


class NotePanel {

    private static _duration: number = 5;
    private static _content: UIText;
    private static _req = {};

    public static node: UINode;

    public static note(duration?: number, content?: string): void {
        AnimationFrame.cancel(this._req);
        if (duration && content) {
            this._duration = duration;
            this._content.text = Utils.formatText(content, 48, 0);
            this.node.display = true;
            AnimationFrame.throttleByTime(this._req, this._duration * 1000, () => {
                this.node.display = false;
            }, false);
        } else {
            this.node.display = false;
        }
    }

    public static initialize(stage: Stage): void {
        const btnTex = CrossImage(1, '#cecece');

        this.node = CreateUINode('note-panel-node', stage.mainScene, {
            anchor: new Vector3(0, 0, 0),
            lockToCamera: true,
            xrRatio: { x: 0.6, y: 0.6 },
            display: false,
        }, [
            CreateUIRectangle('note-panel-background', stage.mainScene, {
                anchor: ANCHOR.LEFT_TOP,
                width: 6,
                height: 0.8,
                cornerRadius: 5,
                alpha: 0.4,
                renderingGroupId: RenderOrder.id(Data.orders.uiBack),
                inoperable: true,
            }),
            this._content = CreateUIText('note-panel-text', stage.mainScene, {
                anchor: ANCHOR.LEFT_TOP,
                width: 6.4,
                height: 0.9,
                left: 0.04,
                top: 0.005,
                fontColor: '#cecece',
                fontSize: 18,
                text: ' ',
                renderingGroupId: RenderOrder.id(Data.orders.ui),
                textHorizontalAlignment: Control.HORIZONTAL_ALIGNMENT_LEFT,
                textVerticalAlignment: Control.VERTICAL_ALIGNMENT_CENTER,
                inoperable: true,
            }),
            CreateUIButton('note-panel-close-button', stage.mainScene, {
                anchor: ANCHOR.LEFT_TOP,
                width: 0.5,
                height: 0.5,
                top: -0.015,
                left: 0.53,
                imageUrl: btnTex,
                renderingGroupId: RenderOrder.id(Data.orders.ui),
                cornerRadius: 5,
                background: '#000099',
            }, () => {
                this.note();
            }),
        ]);
    }

}


export { NotePanel };